<template>
  <div class="order">
    <BackNav />
    <div class="stop_fixed_block">
      <div v-for="item in orderList" :key="item._id" class="order_l">
        <p>省市县：{{ item.regions }}</p>
        <p>详细地址：{{ item.address }}</p>
        <p>收货人：{{ item.receiver }}</p>
        <p>商品价格：{{ item.price }}</p>
        <p>下单时间：{{ item.updatedAt }}</p>
        <van-button type="primary" size="small" @click="getOrder(item._id)"
          >查看订单</van-button
        >
        <van-button type="danger" size="small" @click="del(item._id)"
          >删除订单</van-button
        >
        <hr />
      </div>
      <van-popup
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '35%' }"
        v-if="order"
        class="content"
      >
        <p>省市县：{{ order.regions }}</p>
        <p>详细地址：{{ order.address }}</p>
        <p>收货人：{{ order.receiver }}</p>
        <p>商品价格：{{ order.price }}</p>
        <p>商品数量：{{ quantity }}</p>
      </van-popup>
    </div>
  </div>
</template>

<script>
import BackNav from "@/components/backNav";
import { getOrderList, getOrderById, delOrderById } from "@/api/order";
import { Toast } from "vant";
export default {
  data() {
    return {
      per: 10,
      page: 1,
      orderList: [],
      show: false,
      order: [],
      quantity: 0,
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 获取订单列表
    async loadOrder() {
      let res = await getOrderList({
        per: this.per,
        page: this.page,
      });
      console.log(res);
      this.orderList = res.orders;
    },
    // 根据id获取订单详情
    async getOrder(id) {
      let res = await getOrderById(id);
      console.log(res);
      this.show = true;
      this.order = res.order;
      this.quantity = res.details[0].quantity;
      // console.log(this.quantity);
    },
    // 删除单个订单
    async del(id) {
      let res = await delOrderById(id);
      console.log(res);
      // this.loadOrder();
      Toast("删除订单成功");
      // location.reload();
      this.$router.go(0);
    },

    onSubmit() {},
  },
  created() {
    this.loadOrder();
  },
  mounted() {},
  components: { BackNav },
};
</script>
<style scoped>
p {
  margin: 0;
  padding: 0;
  line-height: 25px;
}
.order_l {
  padding: 5px 10px;
}
.order_l button {
  margin: 10px 15px 0;
}
.order_l .checked {
  margin-bottom: 8px;
}
.content {
  padding: 15px 10px 0 10px;
}
.content p {
  line-height: 25px;
}
.van-popup__close-icon--top-right {
  right: 26px;
}
</style>
